<template>
    <a-drawer width="100%" :body-style="{ paddingBottom: '80px', background: '#f0f2f5' }" :width="1000" :visible="isShow"
        placement="right" :get-container="false" :style="{ position: 'absolute'}" :closable="false"
        :footer-style="{ textAlign: 'right' }">
        <a-card class="mb-2">
            <a-row :gutter="24" class="text-center">
                <a-col :span="20">
                    <!-- <div class=" mb-2 text-left font-semibold  text-lg flex flex-row"
                        style="font-weight: 600;font-size: 16px;">
                        {{info.name}}
                    </div> -->
                    <div class="flex flex-row">
                        <div class="w-32 ">
                            <div class="mb-2">服务商名称</div>
                            <div style="font-weight: 600;">{{info.serviceProvider}}</div>
                        </div>
                        <div class="w-32 ">
                            <div class="mb-2">合同金额</div>
                            <div style="font-weight: 600;">{{info.amount}}</div>
                        </div>
                        <div class="w-36 ">
                            <div class="mb-2">已付款金额</div>
                            <div style="font-weight: 600;">{{info.paidAmount}}</div>
                        </div>
                        <div class="w-36   ">
                            <div class="mb-2">申请人</div>
                            <div style="font-weight: 600;">{{info.createUserName}}</div>
                        </div>
                        <div class="w-32  ">
                            <div class="mb-2">负责人</div>
                            <div style="font-weight: 600;">{{info.directorName}}</div>
                        </div>
                        <div class="w-32   ">
                            <div class="mb-2">提审状态</div>
                            <div style="font-weight: 600;"> {{info.stateText}} </div>
                        </div>
                        <!-- <div class="w-32  border-0   border-r border-dotted  border-gray-500">
                            <div class="mb-2">核算状态</div>
                            <div style="font-weight: 600;"> - </div>
                        </div> -->
                        <!-- <div class="w-32">
                            <div class="mb-2">所属部门</div>
                            <div style="font-weight: 600;">{{ info.orgName }}</div>
                        </div> -->
                    </div>
                </a-col>
                <a-col :span="4" class="text-right">
                    <a-button @click="isShow = false">返回</a-button>
                </a-col>
            </a-row>
        </a-card>
        <a-card class="mb-2">
            <a-tabs>
                <a-tab-pane key="1" tab="详细信息">

                    <edit :disabled="true" ref="editRef"></edit>
                </a-tab-pane>
                <!-- <a-tab-pane key="2" tab="增补合同">

                    <supplementContract :id="id"></supplementContract>
                </a-tab-pane> -->
                <a-tab-pane key="3" tab="付款记录">
                    <ticketReceiptRecords :id="id"></ticketReceiptRecords>
                </a-tab-pane>
                <a-tab-pane key="4" tab="收票记录">
                    <!-- <invoicing :id="id"></invoicing> -->
                    <paymentRecords :id="id"></paymentRecords>

                </a-tab-pane>
                <a-tab-pane key="5" tab="审核流程">
                    <taskInfo :id="info.processId">
                    </taskInfo>
                </a-tab-pane>
            </a-tabs> </a-card>
    </a-drawer>
</template>
<script setup>
import taskInfo from '@/components/Task/info.vue'

import edit from '@/views/flw/customform/contract/components/other/edit.vue';

import supplementContract from './supplementContract.vue';
import paymentRecords from './paymentRecords.vue';
import ticketReceiptRecords from './ticketReceiptRecords.vue';
const editRef = ref()
const info =ref({})
const isShow = ref(false)
const show = (record) => {
    isShow.value = true
    editRef.value.show(record)
    info.value={...record}
}
defineExpose({
    show
});


const refresh = (id) => {
    console.log("fatch Id", id)
}
</script>./edit2.vue